Francisco Hernández
·Follow
2 min read·Sep 15, 2021--
Servir archivos estáticos como imágenes, archivos CSS, archivos de JavaScript o la versión lista para producción luego de hacer un build de una aplicación de una sola página, por ejemplo, con React, es sumamente útil y puede lograrse utilizando la función middleware express.static ya implementada en Express.js.
La firma de la función es:
express.static(root, [options])
En donde el argumento root específica el directorio raíz del cual se sirven los archivos estáticos. El argumento options es un objeto que nos permite indicar ciertas propiedades, por ejemplo, si deseamos ignorar dotfiles dentro del directorio o especificar el directorio de un archivo index.
Hands onRecursos necesarios
Contar con Node.js y Node Package Manager (NPM) instalados en el ordenador y una carpeta con archivos estáticos que servir.
Descargar e instalar Node.js (versión más reciente incluye npm)https://nodejs.org/en/
Pasos
Crear un directorio (carpeta) que contenga la aplicación web, por ejemplo:./served-applicationEn el directorio creado en el paso 1, abrir una terminal, y ejecutar el comando npm init --y para inicializar el nuevo proyecto y colocar la configuración predeterminada. C:\served-application>npm init --ySi se desea establecer una configuración personal (e.g. nombre del paquete, versión, descripción, etc…) entonces remover el --y del comando y ejecutar solamente npm initC:\served-application>npm initEjecutar el comando npm install express para instalar expressC:\served-application>npm install expressDentro de este mismo directorio agregar la carpeta con los archivos estáticos. En este ejemplo, supongamos que se llama publicDentro de este mismo directorio, crear un archivo llamado server.js y dentro de este agregar el siguiente contenido:Contenido de server.jsEl árbol del directorio debería verse de la siguiente forma:
served-application/├─ node_modules/├─ public/├─ package-lock.json├─ package.json├─ server.js7. Ejecutar el comando node server
C:\served-application>node server8. Abrir el navegador y colocar el URL http://localhost:3000Aquí podrá observarse la aplicación que sirve los archivos estáticos.
Como se observa el proceso es bastante sencillo y en más de una situación resultará útil el poder servir una carpeta con archivos estáticos y utilizar express puede resultar muy conveniente.